<template>
  <view class="content">
    <view class="login-content">
      <view class="login-image">
        <van-image
          width="144rpx"
          height="144rpx"
          fit="cover"
          position="left"
          radius="10"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
      </view>
      <view class="login-image-text">灰鲸智能</view>
      <view class="login-form">
        <view
          class="unilogin-form-item login-column"
          :class="'column' + state.checkItem1"
        >
          <van-icon name="user-o" />
          <van-field
            v-model="state.formData.workCode"
            class="login-item-input"
            placeholder="请输入用户名"
            @focus="(state.checkItem1 = '1'), (state.checkItem2 = '')"
            @blur="(state.checkItem1 = ''), (state.checkItem2 = '')"
          />
        </view>
        <view
          class="unilogin-form-item login-column"
          :class="'column' + state.checkItem2"
        >
          <van-icon name="bag-o" /><van-field
            v-model="state.formData.password"
            class="login-item-input"
            placeholder="请输入密码"
            type="password"
            @focus="(state.checkItem1 = ''), (state.checkItem2 = '1')"
            @blur="(state.checkItem1 = ''), (state.checkItem2 = '')"
          />
        </view>
        <van-button
          type="primary"
          block
          :loading="state.submitLoading"
          @click="formSubmit"
          >登录</van-button
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue";
import { setAuthorization, getAuthorization } from "@/utils/auth.js";
import { onLoad } from "@dcloudio/uni-app";

import {
  login, // 获取自定义表单
} from "@/api/login/index.js";

const state = reactive({
  checkItem1: "",
  checkItem2: "",
  submitLoading: false,
  formData: {
    workCode: "admin",
    password: "123456",
  },
});

const { proxy } = getCurrentInstance();
onLoad((e) => {
  let Auth = getAuthorization("Auth");
  if (Auth) {
    uni.navigateTo({
      url: "/pages/list/index",
    });
  }
});

// 获取地理位置信息

const data88 = () => {
  uni.getLocation({
	type: 'wgs84',
	success: function (res) {
		console.log('当前位置的经度：' + res);
		console.log('当前位置的纬度：' + res);
	}
});
};
onMounted(() => {
  data88();
});
const loginFn = async () => {
  try {
    state.submitLoading = true;
    let { data } = await proxy.$post(login, state.formData);
    state.submitLoading = false;
    let token = data.token;
    let name = data.name;
    console.log(token, name);
    setAuthorization("Auth", token);
    setAuthorization("userName", name);
    jumpFn();
  } catch (error) {
    // console.log(error)
    uni.showToast({
      title: error.msg,
      icon: "none",
      duration: 2000,
    });
    state.submitLoading = false;
  }
};

// 提交表单
const formSubmit = (e) => {
  if (state.formData.workCode == "") {
    uni.showToast({
      title: "请输入用户名",
    });
    return;
  }
  if (state.formData.password == "") {
    uni.showToast({
      title: "请输入密码",
    });
    return;
  }
  loginFn();
};

const jumpFn = () => {
  uni.navigateTo({
    url: "/pages/list/index",
  });
};
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(130px);

  .login-image {
    margin-top: -200rpx;
    display: flex;
    justify-content: center;
  }

  .login-image-text {
    margin-top: 15rpx;
    text-align: center;
    font-weight: 700;
    font-size: 32rpx;
    line-height: 150%;
    color: #223263;
  }
}

.login-form {
  margin-top: 20px;
}

.unilogin-form-item {
  display: flex;
  width: calc(100vw - 40rpx);
  border: 2rpx solid #f2f2f2;
  background: #fff;
  align-items: center;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
  border-radius: 10rpx;

  .login-item-input {
    width: 100%;
    margin-left: 10rpx;
    height: 72rpx;
    line-height: 72rpx;
    padding: 0;
    font-size: 60rpx;
  }
}

::v-deep .van-field__control {
  font-size: 32rpx;
  height: 72rpx;
  line-height: 72rpx;
}

.column1 {
  border: 2rpx solid #2596d7 !important;
  color: #2596d7;
}

.van-button {
  height: 120rpx;
  background: radial-gradient(125% 125% at 85.42% 0%, #85d3ff 0%, #2596d7 100%);
  border-radius: 8px;
  font-style: normal;
  font-weight: 600;
  font-size: 36rpx;
  color: #fff;
  border: none;
}

input {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
  -webkit-appearance: none;
  outline: none;
  border: none;
}
</style>
